window.addEventListener('load', function() {
    var slider = document.querySelector('.slider');
    // slider-focus = slider.children[0];  下面的第一个ul
    var focus = document.querySelector('.slider-focus');
    var circle = document.querySelector('.slider-circle');
    var shipt = this.document.querySelector('.search-input')

    // search-input  
    // onfocus 获得焦点
    shipt.onfocus = function() {
        if (this.value == '芋你啵啵') {
            this.value = '';
        }
        this.style.color = '#333';
    };

    // nblur 失去焦点
    shipt.onblur = function() {
        if (this.value == '') {
            this.value = '芋你啵啵';
        }
        this.style.color = '#ccc';
    }

    // 获取slider 的宽度
    var w = slider.offsetWidth;
    // 利用定时器自动轮播图片
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translateX = -index * w;
        focus.style.transition = 'all .3s'
        focus.style.transform = 'translateX(' + translateX + 'px)';
    }, 2500);
    focus.addEventListener('transitionend', function() {
        // 无缝滚动
        if (index >= 3) {
            index = 0;
            focus.style.transition = 'none';
            var translateX = -index * w;
            focus.style.transform = 'translateX(' + translateX + 'px)';
        } else if (index < 0) {
            index = 2;
            focus.style.transition = 'none';
            var translateX = -index * w;
            focus.style.transform = 'translateX(' + translateX + ' px)';
        }
        // 圆点跟随变化效果
        circle.querySelector('.current').classList.remove('current');
        circle.children[index].classList.add('current')
            // console.log(circle.children[index]);
    });
    // 手指滑动轮播图
    var startX = 0;
    var moveX = 0;
    var flag = false;
    focus.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX; //第一个手指的坐标
        clearInterval(timer); //手指触摸停止计时器
    });
    focus.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - startX;
        var translatex = -index * w + moveX;
        focus.style.transition = 'none';
        focus.style.transform = 'translate(' + translatex + 'px)';
        flag = true; //如果用户手指移动过我们再去判断否则不做判断
        e.preventDefault(); //阻止滚动屏幕的行为
    });
    // 手指离开，根据移动距离判断是弹回还是播放下一张
    focus.addEventListener('touchend', function(e) {
            if (flag) {
                if (Math.abs(moveX) > 50) {
                    if (moveX > 0) {
                        index--;
                    } else {
                        index++;
                    }
                    var translatex = -index * w;
                    focus.style.transition = 'all .3s';
                    focus.style.transform = 'translate(' + translatex + 'px)'
                } else {
                    var translatex = -index * w;
                    focus.style.transition = 'all .2s';
                    focus.style.transform = 'translate(' + translatex + 'px)'
                }
                clearInterval(timer);
                timer = setInterval(function() {
                    index++;
                    var translateX = -index * w;
                    focus.style.transition = 'all .3s'
                    focus.style.transform = 'translateX(' + translateX + 'px)';
                }, 2500);
            }
        })
        // 返回顶部模块制作
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('.nav');
    window.addEventListener('scroll', function() {
        if (window.pageYOffset >= nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click', function() {
        window.scroll(0, 0);
    })

    // count 
    var cts = document.querySelectorAll('.countfor');
    var ctzh = document.querySelector('.count-zh');
   
  
    for (var i = 0; i < cts.length; i++) {
        // console.log(cts[i]);
    
        cts[i].onclick = function() {
          for(var i =0 ;i<cts.length; i++){
              ctzh.style.display = 'none'
          }
          ctzh.style.display = 'block'
        //   if(flag == 0) {
        //     ctzh.style.display = 'block';
        //     flag = 1;
        //    }
        //     else {
        //     ctzh.style.display = 'none';
        //     flag = 0;
        //    }
        };



        // cts[i].setAttribute('index', i)
        // cts[i].onclick = function(){
        //     for(var i = 0; i <ctzh.length; i++) {
        //         for (var i= 0; i<ctzh.length; i++) {
        //             // ctzh[i].style.display = 'none';
        //         }
        //         ctzh.style.display = 'block';
        //     }

        // }


    }


    // nav 导航栏切换
    var nav = document.querySelector('.nav');
    var taba = nav.querySelectorAll('a');
    var pdts = document.querySelectorAll('.pdts');
    // 绑定点击事件
    for (var i = 0; i < taba.length; i++) {
        taba[i].setAttribute('index', i)
        taba[i].onclick = function() {
            // 排他思想,其余a清除current
            for (var i = 0; i < taba.length; i++) {
                taba[i].className = '';
            }
            this.className = 'currentds';
            
            // 下面显示内容模块
            var index = this.getAttribute('index');

            for (var i = 0; i < pdts.length; i++) {
                pdts[i].style.display = 'none';
            }
            pdts[index].style.display = 'block';
        }

    }


    // product[index].style.display = 'block'

    // 下拉菜单-筛选
    // var count = document.querySelector('.count-zh');
    // console.log(count);
    // for (var i = 0; i < count.length; i++) {
    //     count[i].onmouseover = function() {
    //         this.style.display = 'block'
    //     }
    // }

    // var ctfor = document.querySelectorAll('.countfor');
    // var ctzh = document.querySelector('.count-zh')
    // ctfor[0].onmousemove = function() {
    //     ctzh.style.display = 'block'
    // }


})